<template>
	<view class="user-header">
		<user-avatar class="user-img" :src="info.avatar_url" />
		<view class="user-info-box">
			<view class="user-name" :class="{male:colorFllow&&info.gender==1,female:colorFllow&&info.gender==2}">{{info.nick_name}}<gender :value="info.gender"></gender> </view>
			<text class="time">{{info.create_time}}</text>
		</view>
	</view>
</template>

<script>
	import UserAvatar from './avatar.vue'
	import Gender from './gender.vue'
	export default {
		components:{
			UserAvatar,
			Gender
		},
		props:{
			info:{
				type:Object,
				default:()=>{
					return{
						nick_name:'',
						gender:'1',
						create_timestamp:''
					}
				}
			},
			colorFllow:Boolean // 昵称颜色是否跟随性别
		}
	}
</script>

<style lang="scss">
.user-header{
	display:flex;
	height: 80rpx;
	margin-bottom:24rpx;
}
.user-info-box{
	display: flex;
	height: 100%;
	// padding:5px 0;
	flex-direction: column;
	justify-content: center;
	flex:1;
}
.user-img{
	margin-right:20rpx;
}
.user-name{
	font-size: 32rpx;
	color: #E7404A;
	&.male{
		color:#5D98F2;
	}
	&.female{
		color:#F48E96;
	}
}
.time{
	margin-top: 12rpx;
	font-size:24rpx;
	color:#999;
}
</style>
